<template>
  <div class="payBox">
    <van-nav-bar title="在线支付"
                 left-arrow
                 @click-left="onClickLeft" />
    <!-- 步骤条 -->
    <wd-steps :active="active"
              align-center>
      <wd-step title="生成订单成功"></wd-step>
      <wd-step title="微信/支付宝支付"></wd-step>
    </wd-steps>
    <!-- 选择微信或支付宝 -->
    <div class="whichPay">
      <div class="sumPrice">
        <p class="tittlePrice">订单金额</p>
        <p class="showPrice">
          <span class="yen">&yen;</span>
          <span class="priceNum">{{this.$store.state.checkedAllPrice}}</span>
        </p>
        <p>
          <span>订单提交成功，请在10分钟内完成支付</span>
        </p>
      </div>
      <div class="aliOrWechat">
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-icon id="weChat"
                      name="wechat"
                      size="25"
                      color="#259B24" />
            <van-cell title="微信支付"
                      clickable
                      @click="radio = '1'">
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-icon id="aliPay"
                      name="alipay"
                      size="25"
                      color="#4095E5" />
            <van-cell title="支付宝支付"
                      clickable
                      @click="radio = '2'">
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
    </div>
    <div class="bottomBtn">
      <wd-button type="error"
                 id="goPay"
                 @click="showCode">去付款</wd-button>
    </div>
    <!-- 弹窗 -->
    <van-dialog v-model="show"
                :title="this.radio == '1' ? '微信支付' : '支付宝支付'"
                show-cancel-button
                theme='round-button'
                confirm-button-text="确认支付"
                cancel-button-text="取消支付"
                @confirm="submitOrder"
                @cancel="closePop"
                :class="this.radio=='1'? 'weChatPay':'aliPay'">
      <img id="whichImg"
           :src="this.radio=='1'? WeChatPay:aLIPay" />
    </van-dialog>
  </div>
</template>

<script>
// import { alipay } from '../api/api'
import WeChatPay from '@/assets/images/weChatPay.png'
import aLIPay from '@/assets/images/aliPay.jpg'
import { Dialog } from 'vant';
import { makesureOrder } from '../api/api'

export default {
  name: '',
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      aLIPay,
      WeChatPay: WeChatPay,
      active: 0,
      radio: '1',
      show: false
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    submitOrder() {
      let query
      this.$store.state.whichCheckd.forEach(element => {
        if (element.checked) {
          query = "?id=" + element.goodsId
          makesureOrder([[query]], this.$store.state.mineAddress.address, this.$store.state.mineAddress.tel, this.$store.state.checkedAllPrice).then(res => {
            // console.log(res);
            if (res.data.code == 0) {
              this.$store.state.orders++
            }
          })
        }
      });
      this.$toast.success('支付成功！')
      this.active = 2
      setTimeout(() => {
        this.$store.state.isClickAllOrder = false
        this.$router.replace('/mineAllOrders')
      }, 0);
    },
    showCode() {
      this.show = true
      this.active = 1
    },
    closePop() {
      this.$toast.warning('取消支付')
      this.active = 0
    },
  },
}
</script>

<style lang='less' scoped>
#whichImg {
  width: 90%;
  margin: 10px 0;
}
/deep/.van-dialog__header {
  padding-top: 10px;
  font-size: 20px;
  font-weight: 600;
}
/deep/.van-dialog--round-button .van-dialog__footer {
  padding: 8px 10px 16px;
}
.weChatPay {
  color: #3e7604 !important;
}
.aliPay {
  color: #097ae5 !important;
}
/deep/.van-dialog {
  text-align: center;
  background-color: #f6f6f6;
}
.payBox {
  height: 100vh;
  background-color: #f0f0f0;
}
/deep/.van-nav-bar__title {
  font-weight: 600;
}
.van-hairline--bottom::after {
  border: none;
}
/deep/.van-nav-bar__content {
  height: 45px;
}
/deep/.wd-step__icon-outer {
  color: #fff;
  border-color: #78aa2f !important;
  background-color: #78aa2f !important;
}
/deep/.is-wait .wd-step__icon-outer {
  color: rgb(207, 202, 202) !important;
  border-color: rgb(207, 202, 202) !important;
  background-color: #fff !important;
}
/deep/.wd-step__title {
  color: #78aa2f !important;
}
/deep/.is-wait .wd-step__title {
  color: rgb(150, 146, 146) !important;
}
/deep/.wd-steps {
  margin: 20px 0;
}
/deep/.wd-step__icon {
  background-color: transparent !important;
}
.whichPay {
  margin: 0 20px;
  height: 37.5%;
  background-color: #fff;
  border-radius: 8px;
  .sumPrice {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 63.9%;
    border-bottom: 1px solid #f0f0f0;
  }
  p {
    text-align: center;
  }
}
/deep/.van-cell {
  padding: 10px 45px;
}
.van-cell::after {
  border: none;
}
.aliOrWechat {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 36.1%;
}
#weChat {
  position: absolute;
  left: 10px;
  top: 9%;
  z-index: 2;
}
#aliPay {
  position: absolute;
  left: 10px;
  top: 60%;
  z-index: 2;
}
.van-hairline--top-bottom::after {
  border: none;
}
.van-radio-group {
  width: 100%;
}
.bottomBtn {
  text-align: center;
}
#goPay {
  margin: 33px auto;
  width: 85%;
  max-width: 90%;
  box-sizing: border-box;
}
.tittlePrice,
.yen,
.priceNum {
  font-weight: 600;
}
.yen {
  margin-right: 8px;
  font-size: 14px;
  color: #ec0d0d;
}
.priceNum {
  font-size: 25px;
  color: #ec0d0d;
}
.tittlePrice {
  font-size: 18px;
}
.showPrice {
  display: flex;
  align-items: center;
}
.wd-curtain.wd-popup {
  width: 90%;
}
</style>